<template>
  <div>
    <h2>事件绑定指令</h2>

    <p>{{ age }}</p>
    <!-- 事件绑定指令事件 v-on:事件名="处理程序  v-on: 可以简化成@-->
    <!-- <button v-on:事件名="处理程序;">按钮</button> -->
    <!-- <button @事件名="处理程序;">按钮</button> -->

    <!-- 事件处理程序，如果代码非常简单，直接写到 <template> 这个区域即可 -->
    <!-- 处理程序，代码只能使用vue中定义好的 data 数据 或 methods 方法 -->
    <button @click="age++">+1</button>

    <!-- 事件处理 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  // data是存储数据的
  data() {
    return {
      age: 20,
    };
  },
  methods: {
    changeAge() {
      this.age--;
      console.log(123);
    },
  },
};
// methods是存储方法的
// vue中,找data数据methods方法...........都是通过this直接找的
</script>

<style>
</style>